<template>
  <el-container class="layout-container-demo" style="height: 100%">
    <el-aside width="200px" style="margin-left: -8px;margin-top: -8px">
      <Aside ></Aside>
    </el-aside>
    <el-container  style="height: 100%">
      <el-header style=" margin-top: -8px">
        <Header></Header>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import Aside from "@/components/Aside";
  import Header from "@/components/Header";
  import Main from "@/components/Main";
  import { ref } from 'vue'
  import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
  export default {
    name: "Index",
    data(){
      return {
      }
    },
    components  : {
      Aside,
      Header,
      Main
    },
    beforeMount() {

    }
  }
</script>

<style scoped>
  .layout-container-demo .el-header {
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
  }
  .layout-container-demo .el-aside {
    display: block;
    position: absolute;
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
  }
  .layout-container-demo .el-menu {
    border-right: none;
  }
  .layout-container-demo .el-main {
    padding: 0;
    left: 200px;
    right: 0;
    top: 60px;
    bottom: 0;
    overflow-y: scroll;
    position: absolute;

  }
  .layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;

  }
</style>
